<template>
  <div class="home" :style="{'background-color':backgroundColor}">
    <div :class="['members_con', { 'noMargin': hasMargin != 1 }]">
      <div v-if="showGoods">
        <div class="decorate-goodsSearch">
        <div class="search-container">
          <div class="search-wrapper">
            <div class="icon miniprogram" @click="searchList">
              <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
            </div>
            <!-- TODO 微分销与小程序差别：小程序回车搜索confirm -->
            <input @confirm="searchList" v-model="keyword" type="text" placeholder="商品搜索：请输入商品关键字"/>
          </div> 
        </div>
      </div>
        <sort-search @item="sortSearchFn" :typeList="typeList"></sort-search>
        <goods :tplItemData="content"></goods>
        <no-data v-if="content.goodsList.length == 0" :noData='noData'></no-data>
      </div>
      <!-- 装修数据 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad">
        <diy-tpl :tplData="tplData"></diy-tpl>
      </van-list>
    </div>
  </div>
</template>
<script>
import diyTpl from './storeTpl'
import { OpenStoreGiftLists } from '@/api/shop/index'
import sortSearch from './sortSearch'
import goods from '@/components/diyTpl/decoration/goods'
import noData from '@/components/noData/index'
import { openPage } from '@/utils/utils'
export default {
  components: {
    diyTpl,
    noData,
    sortSearch,
    goods
  },
  data() {
    return {
      loading: false,
      finished: false,
      content: '',
      tplData: [],
      firstLoading: false,
      error: false,
      hasMargin: 0,
      backgroundColor: '#ccc',
      p: 2,
      keyword: '',
      typeList: [
        { label: '默认', active: true, type: 0, prop: 'default', sort: '' },
        { label: '价格', active: false, type: 1, prop: 'price', sort: '' },
        { label: '销量', active: false, type: 2, prop: 'sales', sort: '' },
        { label: '新品', active: false, type: 3, prop: 'new', sort: '' }
      ],
      sort: '',
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
        text: '暂无符合条件商品',
        width: '214px',
        txtMarginTop: '-30px'
      },
      showGoods: false
    }
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  created() {
    this.getStoreGiftDiyHtml()
  },
  methods: {
    /**
     * 排序搜索
     */
    sortSearchFn(data) {
      this.sort = ''
      if (data.prop == 'default') {
        this.sort = data.sort
      } else if (data.prop == 'price') {
        this.sort = data.sort == 'ascending' ? 'priceUp' : 'priceDown'
      } else if (data.prop == 'sales') {
        this.sort = data.sort == 'ascending' ? 'salesUp' : 'salesDown'
      } else if (data.prop == 'new') {
        this.sort = data.sort == 'ascending' ? 'newUp' : 'newDown'
      }
      this.p = 2
      this.getStoreGiftDiyHtml()
    },
    searchList() {
      // console.log('keyword', this.keyword)
      this.p = 2
      this.getStoreGiftDiyHtml()
    },
    // 装修组件数据
    getStoreGiftDiyHtml() {
      this.$loadingWrap.show()
      OpenStoreGiftLists({
        p: 1,
        title: this.keyword,
        order: this.sort
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const data = res.data
          this.tplData = data._diyHtml
          this.content = data.PModules
          this.firstLoading = false
          this.loading = false
          this.hasMargin = data.has_margin
          this.backgroundColor = data.back_ground_color
          if (this.content.goodsList.length > 0 || (this.keyword != '' || this.sort != '')) {
            this.showGoods = true
          } else {
            this.showGoods = false
          }
          document.title = data.page_title
          if (this.tplData.length < 10) {
            this.finished = true
          }
          // TODO小程序如果第一页加载没有满屏 则继续加载
          this.$nextTick(() => {
            document.querySelector('.home').$$getBoundingClientRect().then(res=>{
              if (res.height*1 < this.height*1) {
                this.onLoad()
              }
            })
          })
        } else {
          openPage(res.data.redirect_url)
        }
      })
    },
    // 装修组件加载更多
    onLoad() {
      if (this.firstLoading) {
        this.loading = false
        return
      }
      const data = {
        p: this.p,
        title: this.keyword,
        order: this.sort
      }
      OpenStoreGiftLists(data).then(res => {
        if (res.status == 1) {
          this.loading = false
          const data = res.data
          if (this.p == 1) {
            this.tplData = data._diyHtml
          } else {
            this.tplData = this.tplData.concat(data._diyHtml)
          }
          this.p++
          if (data._diyHtml.length < 10) {
            this.finished = true
          }
        }
      }).catch(() => {
        this.error = true
      })
    }
  }
}
</script>
<style lang="scss">
@import "src/styles/mixin";
.decorate-goodsSearch{
  padding: 14px 0;
  .search-container {
    position: relative;
  }
  .search-wrapper{
    position:relative;
    width: 100%;
    height: 72px;
    line-height: 72px;
    border-radius: 72px;
    font-size: 0;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 20px;
    .icon {
      margin-right: 10px;
      height:32px;
      &.miniprogram {
        line-height: initial;
        top:20px;
      }
      .icon_search, .img_search{
        width:32px;
        height:32px;
      }
    }
    @include placeColor(#999);
    input {
      display: inline-block;
      width:100%;
      line-height: 40px;
      height: 40px;
      font-size: 28px;
      padding:0 10px;
      border:0;
      background: transparent;
    }
  }
}
.members_con {
  padding: 0 20px;
  &.noMargin{
    margin:0;
  }
}
</style>